<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;">
        <div class="chart-wrapper">
          <h2 class="fromDivTit"><span>请填写交接信息</span><i v-if="handoverInfo.step > 3" class="edit-icon" @click="activeEdit" /></h2>
          <el-form ref="stepForm" :model="stepForm" :rules="stepFormRules" label-width="100px" class="formDiv">
            <el-row style="padding: 34px 40px 20px;">
              <el-col :span="18">
                <el-form-item label="交接清单:" label-width="120px" :required="true">
                  <el-checkbox-group v-model="handoverList" :disabled="disabledEdit" @change="handleChecked">
                    <el-checkbox v-for="item in checkList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="交接资料:" label-width="120px" :required="true">
                  <SingleFile :id="id" v-model="stepForm.handoverData" :maxcount="1000" format="png,pdf,jpg,jpeg,mp4" :urls="stepForm.handoverData" :disabled="disabledEdit" @getImage="getImage" />
                </el-form-item>
                <el-form-item label="交接说明:" label-width="120px" prop="handoverNote">
                  <el-input v-model="stepForm.handoverNote" :disabled="disabledEdit" type="textarea" :rows="4" style="width:100%;max-width:493px;" />
                </el-form-item>
                <p v-if="handoverInfo.handoverDate" style="margin-left:110px;color:#bdbdbd;font-size:12px">
                  交接时间：{{ dateFormat(handoverInfo.handoverDate) }}
                </p>
              </el-col>
              <el-col :span="6">
                <div v-if="jumpInfo.length > 0" class="jump-note">
                  <div class="jump-note__title">跳过原因：</div>
                  <div class="jump-note__note">{{ jumpInfo[0].jumpNote }}</div>
                </div>
              </el-col>
            </el-row>
            <div v-if="handoverInfo.step > 3" class="dialog-footer">
              <el-button v-if="!disabledEdit" type="primary" @click="editCtrl">保存</el-button>
            </div>
            <div v-else class="dialog-footer">
              <el-button :disabled="disabled" :type="disabled ? 'info' : 'primary'" @click="stepCtrl">下一步</el-button>
              <el-button type="primary" @click="jump">跳过此步</el-button>
            </div>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import SingleFile from '@/components/Upload/SingleFile'
import { rentSubmitStep3, rentHandoverEdit } from '@/api/handover'
import { dateFormat } from '@/utils/common'

export default {
  components: {
    SingleFile
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    handoverInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      disabled: true,
      disabledEdit: false,
      jumpInfo: [],
      checkList: [{
        id: 0,
        name: '租金对账单'
      }, {
        id: 1,
        name: '押金单'
      }, {
        id: 2,
        name: '租客申请表'
      }, {
        id: 3,
        name: '租客工作和个人电话'
      }, {
        id: 4,
        name: '例行检查报告'
      }, {
        id: 5,
        name: '入住检查报告'
      }, {
        id: 6,
        name: '房屋的照片'
      }, {
        id: 7,
        name: '钥匙'
      }, {
        id: 8,
        name: '保险资料'
      }, {
        id: 9,
        name: '物业公司信息'
      }, {
        id: 10,
        name: '未支付的账单'
      }, {
        id: 11,
        name: '家电设备保修手册'
      }, {
        id: 12,
        name: '车位/储物间号码'
      }, {
        id: 13,
        name: '租约'
      }, {
        id: 14,
        name: '目前租金及最后一次支付时间'
      }],
      handoverList: [],
      stepForm: {
        handoverList: '',
        handoverListName: '',
        handoverData: '',
        handoverNote: ''
      },
      stepFormRules: {
        handoverNote: [
          { required: true, message: '验房说明', trigger: 'blur' }
        ]
      },
      dateFormat
    }
  },
  watch: {
    stepForm: {
      handler(newVal, oldVal) {
        if (newVal.handoverData && newVal.handoverNote && newVal.handoverList) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      },
      deep: true
    }
  },
  created() {
    this.initInfo()
  },
  methods: {
    jump() {
      this.$emit('jump', this.stepForm)
    },
    async stepCtrl() {
      const params = {
        ...this.stepForm,
        id: this.id
      }
      this.stepForm.id = this.id
      const res = await rentSubmitStep3(params)
      if (res.code === 200) {
        this.$emit('next')
      }
    },
    getImage(val) {
      console.log('val.toString():', val.toString())
      this.stepForm.handoverData = val.toString()
    },
    async editCtrl() {
      const params = {
        ...this.stepForm,
        id: this.id,
        stepName: '待上传交接清单'
      }
      this.stepForm.id = this.id
      const res = await rentHandoverEdit(params)
      if (res.code === 200) {
        this.$notify({
          title: '成功',
          message: '保存成功',
          type: 'success'
        })
        this.$emit('edit')
      }
    },
    initInfo() {
      Object.keys(this.stepForm).map(i => {
        this.stepForm[i] = this.handoverInfo[i]
        console.log(this.handoverInfo[i])
      })
      if (this.handoverInfo.handoverList) {
        this.handoverList = Array.prototype.map.call(this.handoverInfo.handoverList.split(','), x => parseInt(x))
        console.log(this.handoverList)
      }
      if (this.handoverInfo.jumpList) {
        this.jumpInfo = this.handoverInfo.jumpList.filter(item => item.jumpStep === 3)
      }
      if (this.handoverInfo.step > 3) {
        this.disabledEdit = true
      }
    },
    activeEdit() {
      this.disabledEdit = !this.disabledEdit
    },
    handleChecked(val) {
      console.log(val)
      const labels = []
      val.forEach(item => {
        this.checkList.forEach(x => {
          if (x.id === item) {
            labels.push(x.name)
          }
        })
      })
      this.stepForm.handoverList = val.toString()
      this.stepForm.handoverListName = labels.toString()
      console.log('handoverList', this.stepForm.handoverList)
      console.log('name', this.stepForm.handoverListName)
    }
  }
}
</script>
<style lang="scss" scoped>
.formDiv {
  background: #fff;
}
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 40px;
  height: 63px;
  border-top: 1px solid #f2f2f2;
}

.jump-note {
  margin-top: 30px;
  margin-left: 16px;
  font-size: 12px;

  &__title {
    color: #5AC6B7;
    margin-bottom: 16px;
  }
}
</style>
